<!--折线图堆叠-->
<template>
<!--    <div id="main" style="margin: 10px auto;width: 500px;height: 500px"></div>-->
    <div id="main" style="width:1000px;height:600px;margin: 10px auto;"></div>
</template>

<script>
    import request from "../utils/request";

    const echarts = require('echarts');

    export default {
        name: "LineChart",
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 100,
                total: 0,
                tableData: [],
                company: ['公司','阿里妈妈','华为','牛客网','小米加步枪','猿辅导'],
                date:  ['company','Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
                data0:  ['阿里妈妈',6, 7, 9, 343, 352,3,4],
                data1: ['小米',6, 7, 9, 43, 662,1,2],
                data2: ['华为',6, 7, 9, 43, 992,1,2],
                data3: ['牛客网',16, 7, 19, 3, 52,1,2],
                data4:  ['猿辅导',6, 7, 9, 43, 352,1,2],
            }
        },
        mounted(){
            this.initChart();
        },
        methods: {
            initChart() {

                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                setTimeout(function () {

                    request.get("/exerciseRank",{ // 请求/exerciseRank接口
                        params: {
                            pageNum: 1,
                            pageSize: 100,
                            search: ''
                        }
                    }).then(res=>{
                        console.log(res)

                        this.date=['company','Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'];
                        this.data0=['阿里妈妈',6, 7, 9, 343, 352,3,4];
                        this.data1=['小米',6, 7, 9, 43, 662,1,2];
                        this.data2=['华为',6, 7, 9, 43, 992,1,2];
                        this.data3=['牛客网',16, 7, 19, 3, 52,1,2];
                        this.data4=['猿辅导',6, 7, 9, 43, 352,1,2];

                        this.data0[0]=res.data.records[0]['company'];
                        this.data1[0]=res.data.records[1]['company'];
                        this.data2[0]=res.data.records[2]['company'];
                        this.data3[0]=res.data.records[3]['company'];
                        this.data4[0]=res.data.records[4]['company'];

                        for (var i=0;i<res.data.records.length;i+=5)
                        {
                            this.date[(i/5)+1]=res.data.records[i]['dayOfWeek'];
                        }
                        //
                        console.log(this.date);

                        // console.log(this.data0);
                        // console.log(res.data.records.length);
                        for (var i=0;i<res.data.records.length;i+=5)
                        {
                            this.data0[(i/5)+1]=res.data.records[i]['exerciseNum'];
                            // console.log(this.data0[(i/5)+1])
                            this.data1[(i/5)+1]=res.data.records[i+1]['exerciseNum'];
                            this.data2[(i/5)+1]=res.data.records[i+2]['exerciseNum'];
                            this.data3[(i/5)+1]=res.data.records[i+3]['exerciseNum'];
                            this.data4[(i/5)+1]=res.data.records[i+4]['exerciseNum'];
                        }
                        // console.log(this.data4);

                        option = {
                            title: {
                                text: '练习题量分析',
                                subtext: '数据来自牛客网',
                                left: 'center'
                            },
                            legend: {
                                bottom: '0%',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'axis',
                                showContent: false
                            },
                            toolbox: {  // 显示保存图片的按钮
                                show: true,
                                orient: 'horizontal',
                                bottom: 10,
                                right: 20,
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            dataset: {
                                source: [
                                    // ['company','Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
                                    // ['阿里妈妈',6, 7, 9, 343, 352,3,4],
                                    // ['小米',6, 7, 9, 43, 662,1,2],
                                    // ['华为',6, 7, 9, 43, 992,1,2],
                                    // ['牛客网',16, 7, 19, 3, 52,1,2],
                                    // ['猿辅导',6, 7, 9, 43, 352,1,2],
                                    this.date,
                                    this.data0,
                                    this.data1,
                                    this.data2,
                                    this.data3,
                                    this.data4,
                                ]
                            },
                            xAxis: {type: 'category'},
                            yAxis: {gridIndex: 0},
                            grid: {top: '55%'},
                            series: [
                                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                {
                                    type: 'pie',
                                    id: 'pie',
                                    radius: '30%',
                                    center: ['50%', '25%'],
                                    emphasis: {focus: 'data'},
                                    label: {
                                        formatter: '{b}: {@Mon} ({d}%)'
                                    },
                                    encode: {
                                        itemName: 'company',
                                        value: 'Mon',
                                        tooltip: 'Mon'
                                    }
                                }
                            ]
                        };

                        myChart.on('updateAxisPointer', function (event) {
                            var xAxisInfo = event.axesInfo[0];
                            if (xAxisInfo) {
                                var dimension = xAxisInfo.value + 1;
                                myChart.setOption({
                                    series: {
                                        id: 'pie',
                                        label: {
                                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                        },
                                        encode: {
                                            value: dimension,
                                            tooltip: dimension
                                        }
                                    }
                                });
                            }
                        });

                        myChart.setOption(option);

                    })

                });

                option && myChart.setOption(option);


            },
        }
    }
</script>

<style scoped>

</style>